<template>
	<!-- 列表内容 -->
	<table class="table table-striped table-hover table-bordered">
		<thead>
			<tr>
				<th scope="col">序号</th>
				<th scope="col">学习科目</th>
				<th scope="col">学习内容</th>
				<th scope="col">学习地点</th>
				<th scope="col">完成状态</th>
				<th scope="col">操作</th>
			</tr>
		</thead>
		<tbody>
			<!-- 学习计划列表渲染 -->
			<tr v-for="(item,i) in list" :key="i">
				<td>{{ item.id }}</td>
				<td>{{ item.subject }}</td>
				<td>{{ item.content }}</td>
				<td>{{ item.place }}</td>
				<!-- 是否已完成 -->
				<td>
					<div class="form-check form-switch">
						<input class="form-check-input" type="checkbox" role="switch" v-model="item.status" :id="'cb' + item.id" />
						<label class="form-check-label" :for="'cb' + item.id">{{item.status ? '已完成' : '未完成' }}</label>
					</div>
				</td>
				<td>
					<a href="javascript:;" @click="remove(item)">删除</a>
				</td>
			</tr>
		</tbody>
	</table>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			},
		},
		methods: {
			remove(item) {
				// 只有已完成，可以删除
				if (item.status) {
					this.$emit("delItem", item.id) //触发父组件自定义方法，并传参
				} else {
					alert('请完成该学习计划后再进行删除操作！')
				}
			},
		},
	}
</script>

<style>
</style>